<template>
	<u-transition :show="isLoading">
    <view class="container">
       <view class="ul">
           <u-tabs
               :list="tabs"
               :scrollable="false"
               lineWidth="25px"
               lineHeight="2px"
               lineColor="#3C69FE"
               itemStyle="flex:1;height: 40px;border-bottom: none"
               :activeStyle="{
                    color: '#356CE7',
                    fontSize: '14px'
                }"
               :inactiveStyle="{
                    color: '#B6B6B6',
                    fontSize: '14px'
                }"
               @click="tabClick"
           ></u-tabs>
           <view class="ranking">
               <block v-if="ranking">
                   <view class="icon-ranking"></view>
                   <view class="ranking-label">我的排名</view>
                   <view class="ranking-num">{{ ranking }}</view>
               </block>
               <block v-else>
                   <view class="ranking-label">未上榜</view>
               </block>
           </view>

           <u-list
              @scrolltolower="scrolltolower"
              :height="listHeight"
              :preLoadScreen="12"
              v-show="tabCurrent===1"
           >
               <view class="h-30"></view>
               <u-list-item
                   v-for="(item, k) in agentList"
                   :key="k"
                   class="list-item"
               >
                   <agent-top-item :index="k + 1" :num="item.inviteNum" :info="item"></agent-top-item>
               </u-list-item>
           </u-list>
           <u-list
               @scrolltolower="scrolltolower"
               :height="listHeight"
               :preLoadScreen="12"
               v-show="tabCurrent===0"
           >
               <view class="h-30"></view>
               <u-list-item
                   v-for="(item, k) in agentIdentifyList"
                   :key="k"
                   class="list-item"
               >
                   <agent-top-item :index="k + 1" :num="item.direct_count" :info="item"></agent-top-item>
               </u-list-item>
           </u-list>
       </view>
       <view class="btn" @click="$u.route('pages/share/agent')">
           <view class="btn-icon"></view>
           <view class="btn-name">立即邀请</view>
       </view>
    </view>
	</u-transition>
</template>

<script>
    import AgentTopItem from "@/components/AgentTopItem"
    import { getAgentTop,getIdentifyTop } from "@/config/api"
    export default {
        name: "index",
        components: {
            AgentTopItem
        },
        data() {
          return {
              listHeight: null,
              listQuery: {
                  column: 'inviteNum',
                  direction: 'desc',
                  page: 1,
                  list_rows: 100
              },
              total: 0,
              agentList: [],
              agentIdentifyList: [],
              listIdentifyQuery: {
                  column: 'direct_count',
                  direction: 'desc',
                  page: 1,
                  list_rows: 100
              },
              tabs: [
                  {
                      name: "实名榜",
                      identify: 1
                  },
                  {
                      name: "邀请榜",
                      identify: 0
                  }
              ],
              tabCurrent: 0,
			  isLoading: false
          }
        },
        computed: {
            ranking() {
                var index = null
                if (this.tabCurrent === 1) {
                    this.agentList.forEach((item, k) => {
                        if (item.id === this.$store.getters.userId) {
                            index = k + 1;
                            return
                        }
                    })
                    return index
                }
                if (this.tabCurrent === 0) {
                    this.agentIdentifyList.forEach((item, k) => {
                        if (item.id === this.$store.getters.userId) {
                            index = k + 1;
                            return
                        }
                    })
                    return index
                }
            }
        },
        methods: {
            scrolltolower() {

            },
            async getData(more = false) {
                const res = await getAgentTop(this.listQuery)
                if (more) {
                    this.agentList = [...this.agentList, ...res.items]
                } else {
                    this.agentList = res.items
                }
                this.total = res.total
            },
            async getIdentifyData() {
              const res = await getIdentifyTop(this.listIdentifyQuery)
              this.agentIdentifyList = res.items
			  this.isLoading = true
            },
            tabClick(item) {
                this.tabCurrent= item.index
                //this.getData();
                if (this.tabCurrent === 0 && this.agentIdentifyList.length <= 0) {
                    this.getIdentifyData()
                }
                if (this.tabCurrent === 1 && this.agentList.length <= 0) {
                    this.getData()
                }
            }
        },
        async onLoad() {
            var height = uni.getSystemInfoSync().windowHeight
            this.listHeight = (height - 22 -50 - 30- 40)   + "px"
            //console.log(res)
            this.getIdentifyData()
        }
    }
</script>

<style lang="scss" scoped>
    .container {
        box-sizing: border-box;
        width: 100vw;
        height: 100vh;
        background: url("https://img.ionepin.com/9426c10b69f952ed017ccf0c59cb543e234dcd13.png") no-repeat;
        background-size: 100% 100%;
        padding-top: 22px;
        position: relative;
        .ul {
            background: #FFFFFF;
            border-top-left-radius: 20rpx;
            border-top-right-radius: 20rpx;
            margin: 0 25rpx;
            .h-30 {
                height: 30rpx;
            }
            .list-item {
                padding: 0 20rpx;
            }
            .ranking {
                background: url("https://img.ionepin.com/6b94c1901fda647a82b6919e1930b90f80634bbd.png") no-repeat;
                width: 100%;
                height: 30px;
                background-size: 100% 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                .icon-ranking {
                    width: 14px;
                    height: 11px;
                    background: url("https://img.ionepin.com/5674a79c2c0989cf6727e297a4dc77861109cb47.png") no-repeat;
                    background-size: 100% 100%;
                    margin-right: 6px;
                }
                .ranking-label {
                    font-size: 13px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #356CE7;
                    line-height: 1.5;
                }
                .ranking-num {
                    font-size: 14px;
                    font-family: PingFang-SC-Bold, PingFang-SC;
                    font-weight: bold;
                    color: #356CE7;
                    line-height: 1.5;
                    margin-left: 8px;
                }
            }
        }
        .btn {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            //width: 100%;
            height: 50px;
            background: #6B7DF0;
            display: flex;
            align-items: center;
            justify-content: center;
            .btn-icon {
                background: url("https://img.ionepin.com/b9ee5a771691eabcc1b958546593dab86509fc48.png") no-repeat;
                background-size: 100% 100%;
                width: 38rpx;
                height: 38rpx;
            }
            .btn-name {
                font-size: 32rpx;
                font-family: PingFang-SC-Bold, PingFang-SC;
                font-weight: bold;
                color: #FFFFFF;
                margin-left: 8rpx;
            }
        }
    }
</style>
